<template>
  <div class="test">
    <canvas width="400" height="400" ref="cvsRef"></canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
  name: "test",
  setup() {
    const cvsRef = ref<HTMLCanvasElement>();
    onMounted(() => {
      const ctx = cvsRef.value?.getContext("2d");
      // (ctx as CanvasRenderingContext2D).fillStyle = "red";
      if (ctx) {
        // fillStyle: 填充一个矩形x,y,长,宽
        // strokeStyle: 绘制一个矩形x,y,长,宽
        // clearRect: 清除一个矩形区域x,y,长,宽

        ctx.fillStyle = "rgb(180,200,245,.3)";
        ctx.fillRect(10, 10, 100, 100);

        ctx.fillStyle = "rgb(100,200,100,.3)";
        ctx.fillRect(50, 50, 100, 100);

        ctx.strokeStyle = "red";
        ctx.strokeRect(100, 100, 100, 100);
        ctx.clearRect(50, 50, 20, 20);
      }
    });
    return { cvsRef };
  },
});
</script>
<style scoped>
.test {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
canvas {
  border: 1px solid red;
}
</style>
